<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="博客，邮箱，相册" />
		<title>360项目</title>
		<link  rel="stylesheet" href="css.css" type="text/css">
		<link  rel="stylesheet" href="donghua1.css" type="text/css">
		<link  rel="stylesheet" href="donghua2.css" type="text/css">
		<link  rel="stylesheet" href="donghua3.css" type="text/css">
		<style>
		</style>
		<script>
			var tur=true;
			window.onscroll=function(){
				// console.log(document.documentElement.scrollTop);
				var scrollTop = document.documentElement.scrollTop;
				if (tur&&scrollTop >=350){
					// for(var i=1; i < 8; i++){
					// 	var q1d=document.getElementsByClassName("q"+i);	
					// 	q1d[0].classList.add("q"+i+"d");
					// 	q1d[0].classList.add("q8d");
					// }
					q1add();
					tur = false;
					// var  t=setTimeout(function(){q1move()},8500);	 
				}
			}
			// q1move()
			window.onload=function(){
				document.getElementById("zzq").setAttribute("onclick","q1donghua()")
			}
			var nb=0;
			function q1donghua(){
				// var qq1d=document.getElementsByClassName("q1");
				// if(qq1d[0].classList[1]==("q1d")){
				// 	q1move();
				// 	console.log(qq1d[0].classList[1]==("q1d"));		
				// }else{
				// 	q1add();
				// }
				if(nb==0){
					q1move();
					// ele.removeEventListener('animationend',handle,false);
				}else{
					q1add();
				}		
				// var element = document.getElementById("lastplay")
				// console.log(element)
				// element.addEventListener('animationend', handle, true)
				// function handle(){
				// 	setTimeout(function(){ alert('transitionend事件触发') },2000); 
				// }
				
			}
			// var element = document.getElementsByClassName('q7d')
			var running
			function q1add(){
				running=true;
				for(var i=1; i < 8; i++){
						var q1d=document.getElementsByClassName("q"+i);
						// console.log(q1d);	
						q1d[0].classList.add("q"+i+"d");
						q1d[0].classList.add("q8d");
						q1d[0].style.opacity="0";			
						nb=0;				
				}
				// setTimeout(function(){q1move()},8500);		
				console.log("加动画");
				if(running==true){
					var ele = document.getElementById("lastplay");
					ele.addEventListener('animationend', q1move, false);
				}			
			}
			function handle(){
				setTimeout(function(){ q1move();running=false},1500); 
			}	
			function q1move(){
				// var q1move=document.getElementById("zzq");			
				console.log("删动画");
				for(var i=1; i < 8; i++){
					var q1d=document.getElementsByClassName("q"+i);
					q1d[0].classList.remove("q"+i+"d");
					q1d[0].classList.remove("q8d");
					q1d[0].style.opacity="1";
					nb=1;
				}		
				// document.getElementById("zzq").style.opacity=1;
			}
		</script>
	</head>
	<body style="overflow-y: scroll">
		<div id="div">
			<div id="head">
				<div id="fl"></div>
				<div id="fl4"></div>
				<div id="fl3"></div>
				<div id="fl2">
					<ul>
						<li>首页</li>
						<li>常见问题</li>
						<li>支持机型</li>
						<li>官方微博</li>
						<li>官方论坛</li>
					</ul>
				</div>
			</div>
			<div id="body1">
				<div id="b1">
					<div id="b11"></div>
					<div id="b12"></div>
					<div id="b13"></div>
					<div id="b14">
						<ul>
							<li class="green_circle">
								<p></p>
								<b></b>
							</li>
							<li class="yellow_circle">	
								<p></p>
								<b></b>
							</li>
							<li class="blue_circle">
								<p></p>
								<b></b>
							</li>
							<li class="red_circle">
								<p></p>
								<b></b>
							</li>
							<li class="orange_circle">
								<p></p>
								<b></b>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="body2">
				<div id="b21"></div>
				<div id="b22"></div>	
				<div id="b23">
					<!--  href="javascript:void(0);"  -->
					<a id="zzq" style="text-decoration: none;display: inline-block;cursor:pointer;">
						<ul>
							<li class="q1"></li>
							<li class="q2"></li>
							<li class="q3"></li>
							<li class="q4"></li>
							<li class="q5"></li>
							<li class="q6"></li>
							<li id="lastplay" class="q7"></li>
						</ul>
					</a>
				</div>		
			</div>
			<div class="body3 kuang">
				<div class="bodyb">
					<div id="b31"></div>
					<div id="b32"></div>
					<div id="b33" class="class1"></div>
				</div>
			</div>
			<div class="body2">
				<div class="bodyb body4"></div>		
			</div>
			<div class="body5 kuang">
				<div class="bodyb">
					<div id="b51"></div>
					<div id="b52"></div>
					<div id="b53" class="class1"></div>
				</div>
			</div>
			<div class="body6">
				<ul>
					<li class="hujiao">
						<a></a>
						<h4>一键呼叫</h4>
						<p>找不到周围物品时，点击“呼叫”按钮，便可以通过声音找到它</p>
					</li>
					<li class="tixing">
						<a></a>
						<h4>智能提醒</h4>
						<p>当物品和手机距离较远时，手机会收到警报，提醒您不忘带物品</p>
					</li>
					<li class="jilu">
						<a></a>
						<h4>定位记录</h4>
						<p>防丢卫士会记录物品丢失前的最后位置和时间，方便快速寻找</p>
					</li>
					<li class="fangdiu">
						<a></a>
						<h4>双向防丢</h4>
						<p>当手机距离较远时，防丢卫士会发出声音，提醒您手机不在身边</p>
					</li>
					<li class="gonghao">
						<a></a>
						<h4>超低功耗</h4>
						<p>最新蓝牙4.9技术，超低功耗，一枚电池可用3个月以上</p>
					</li>
					<li class="yidai">
						<a></a>
						<h4>小巧易戴</h4>
						<p>仅一元硬币大小，可轻松粘贴或佩挂在物品上</p>
					</li>
				</ul>
			</div>
			<div class="foot">
				<div class="foot1">
					<div class="table">
						<table>
							<thead>
								<td><a href="#">关注我们</a></td>
								<td><a href="#">相关网站</a></td>
							</thead>
							<tbody>
								<tr>
									<td><a href="#">官方论坛</a></td>
									<td><a href="#">360硬件专区</a></td>
								</tr>
								<tr>
									<td><a href="#">新浪微博</a></td>
									<td><a href="#">360安全路由</a></td>
								</tr>
								<tr>
									<td></td>
									<td><a href="#">360儿童卫士</a></td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="ico">
						<div id="ico1"></div>
						<div id="ico2"></div>
					</div>
					<div class="banquan">
						<a>Copyright ©2005-2014 360.cn All Rights Reserved.360安全中心</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

